<template>
    <div class="header_container">
        <div class="background">
            <router-link to="/manage">
                <i class="el-icon-s-home" id="home"></i>
            </router-link>
            <el-dropdown style="float: right; padding-top: 21px; padding-right: 40px;" placement="top-start">
                <span class="el-dropdown-link">
                    {{name}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>用户信息</el-dropdown-item>
                    <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <i class="el-icon-s-custom" id="user"></i>
        </div>
    </div>
</template>

<script>
import {reqUserInfo} from '../api'

export default ({
    data() {
        return {
            uid: '',
            name:''
        }
    },
    methods: {
        logout() {
            this.$store.state.uid = 0;  //不知道怎么设置store里的值
            this.$router.push('/');
        }
    },
    async mounted() {
        this.uid=this.$store.state.uid
        const result=await reqUserInfo(this.$store.state.uid)
        this.name=result.name
        console.log(this.$store.state.uid)
        console.log(result)

    },
})
</script>

<style scope>
.header_container {
    text-align: left;
    background-color: #9f9fd1;
	height: 60px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    box-shadow: 0px 0px 3px 3px rgb(204, 201, 201);
}
.background {
    width: 100%;
}
#home {
    color: white;
    font-size: 30px;
    padding-top: 16px;
    padding-left: 40px;
}
#user {
    color: #5757a8; 
    float: right;
    font-size: 30px;
    padding-top: 16px;
    padding-right: 10px
}
.el-dropdown-link {
    cursor: pointer;
    font-size: 16px;
    color: black;
}
</style>